(Optional) Explaining JavaScript file Script.js

The JavaScript file is responsible for managing the user interface and interactions of a chatbot application. It is located in static folder. The main components of the file are as follows:

  1. Message processing: The function processUserMessage(userMessage) sends a POST request to the server with the user's message and waits for a response. The server processes the message and returns a response that is displayed in the chat window.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  1. const processUserMessage = async (userMessage) => {
  2. let response = await fetch(baseUrl + "/process-message", {
  3. method: "POST",
  4. headers: { Accept: "application/json", "Content-Type": "application/json" },
  5. body: JSON.stringify({ userMessage: userMessage }),
  6. });
  7. response = await response.json();
  8. console.log(response);
  9. return response;
  10. };
  1. Loading animations: The functions showBotLoadingAnimation() and hideBotLoadingAnimation() show and hide a loading animation while the server is processing a message or document.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  1. async function showBotLoadingAnimation() {
  2. await sleep(200);
  3. $(".loading-animation")[1].style.display = "inline-block";
  4. document.getElementById('send-button').disabled = true;
  5. }
  6. function hideBotLoadingAnimation() {
  7. $(".loading-animation")[1].style.display = "none";
  8. if(!isFirstMessage){
  9. document.getElementById('send-button').disabled = false;
  10. }
  11. }
  1. Message display: The functions populateUserMessage(userMessage, userRecording) and populateBotResponse(userMessage) format and display user messages and bot responses in the chat window.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  1. const populateUserMessage = (userMessage, userRecording) => {
  2. $("#message-input").val("");
  3. $("#message-list").append(
  4. `<div class='message-line my-text'><div class='message-box my-text${
  5. !lightMode ? " dark" : ""
  6. }'><div class='me'>${userMessage}</div></div></div>`
  7. );
  8. scrollToBottom();
  9. };
  10. const populateBotResponse = async (userMessage) => {
  11. // ... omitted for brevity
  12. $("#message-list").append(
  13. `<div class='message-line'><div class='message-box${!lightMode ? " dark" : ""}'>${response.botResponse.trim()}<br>${uploadButtonHtml}</div></div>`
  14. );
  15. scrollToBottom();
  16. };
  1. Input cleaning: The function cleanTextInput(value) cleans the user's input to remove unnecessary spaces, newlines, tabs, and HTML tags.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  1. const cleanTextInput = (value) => {
  2. return value
  3. .trim() // remove starting and ending spaces
  4. .replace(/[\n\t]/g, "") // remove newlines and tabs
  5. .replace(/<[^>]*>/g, "") // remove HTML tags
  6. .replace(/[<>&;]/g, ""); // sanitize inputs
  7. };
  1. File upload: The event listener for $("#file-upload").on("change", ...) handles the file upload process. When a file is selected, it reads the file data and sends it to the server for processing.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  1. $("#file-upload").on("change", function () {
  2. const file = this.files[0];
  3. const reader = new FileReader();
  4. reader.onload = async function (e) {
  5. // Now send this data to /process-document endpoint
  6. let response = await fetch(baseUrl + "/process-document", {
  7. method: "POST",
  8. headers: { Accept: "application/json", "Content-Type": "application/json" },
  9. body: JSON.stringify({ fileData: e.target.result }),
  10. });
  11. response = await response.json6. **Chat Reset:** The event listener for `$("#reset-button").click(...)` provides a way to reset the chat, clearing all messages and starting over with the initial bot greeting.
  1. Chat reset: It provides a way to reset the chat, clearing all messages and starting over with the initial bot greeting.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  1. $("#reset-button").click(async function () {
  2. // Clear the message list
  3. $("#message-list").empty();
  4. // Reset the responses array
  5. responses.length = 0;
  6. // Reset isFirstMessage flag
  7. isFirstMessage = true;
  8. // Start over
  9. populateBotResponse();
  10. });
  1. Light/Dark mode switch: The event listener for $("#light-dark-mode-switch").change(...) allows the user to switch between light and dark modes for the chat interface.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  1. $("#light-dark-mode-switch").change(function () {
  2. $("body").toggleClass("dark-mode");
  3. $(".message-box").toggleClass("dark");
  4. $(".loading-dots").toggleClass("dark");
  5. $(".dot").toggleClass("dark-dot");
  6. lightMode = !lightMode;
  7. });